<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疫情可视化地图</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
</head>

<body>

    <div id="main" style="height: 600px;width: 400px;"></div>
    <script type="text/javascript">

        var map = echarts.init(document.getElementById("main"));

        //定义数组
        var data = [
            {
                name: '北京',
                value: 212
            }, {
                name: '天津',
                value: 60
            }, {
                name: '上海',
                value: 208
            }, {
                name: '重庆',
                value: 337
            }, {
                name: '河北',
                value: 126
            }, {
                name: '河南',
                value: 675
            }, {
                name: '云南',
                value: 117
            }, {
                name: '辽宁',
                value: 74
            }, {
                name: '黑龙江',
                value: 155
            }, {
                name: '湖南',
                value: 593
            }, {
                name: '安徽',
                value: 480
            }, {
                name: '山东',
                value: 270
            }, {
                name: '新疆',
                value: 29
            }, {
                name: '江苏',
                value: 308
            }, {
                name: '浙江',
                value: 829
            }, {
                name: '江西',
                value: 476
            }, {
                name: '湖北',
                value: 13522
            }, {
                name: '广西',
                value: 139
            }, {
                name: '甘肃',
                value: 55
            }, {
                name: '山西',
                value: 74
            }, {
                name: '内蒙古',
                value: 34
            }, {
                name: '陕西',
                value: 142
            }, {
                name: '吉林',
                value: 42
            }, {
                name: '福建',
                value: 179
            }, {
                name: '贵州',
                value: 56
            }, {
                name: '广东',
                value: 797
            }, {
                name: '青海',
                value: 15
            }, {
                name: '西藏',
                value: 1
            }, {
                name: '四川',
                value: 282
            }, {
                name: '宁夏',
                value: 34
            }, {
                name: '海南',
                value: 79
            }, {
                name: '台湾',
                value: 10
            }, {
                name: '香港',
                value: 15
            }, {
                name: '澳门',
                value: 9
            }
        ]

        var option = {
            //分段映射组件
            visualMap: [{
                type: 'piecewise',
                pieces: [
                    { min: 1000, label: '10000人及以上', color: '#B32208' },
                    { min: 1000, max: 9999, label: '10000-9999人', color: '#B32208' },
                    { min: 500, max: 999, label: '500-999人', color: '#B32208' },
                    { min: 100, max: 499, label: '100-999人', color: '#DA4F2C' },
                    { min: 1, max: 99, label: '1-99人', color: '#F29089' },
                ],
            }],
            //显示工具
            tooltip: {
                show: true
            },
            geo: {
                map: 'china'
            },
            series: [{
                name: '地图',
                type: 'map',
                geoIndex: 0,
                data: data
            }]
        };

        map.setOption(option);
    </script>
</body>

</html>